<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>案例详情 - Game for Good</title>

  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <!-- Place favicon.ico in the root directory -->
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

  <!-- build:css styles/vendor.css -->
  <link rel="stylesheet" href="/node_modules/aos/dist/aos.css" type="text/css" />
  <link rel="stylesheet" href="/node_modules/swiper/swiper-bundle.css" type="text/css" />
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="/node_modules/@fancyapps/ui/dist/fancybox/fancybox.css" type="text/css" />
  <!-- endbuild -->

  <!-- build:css styles/common.css -->
  <link rel="stylesheet" href="styles/common.css">
  <!-- endbuild -->
</head>

<body>
  <!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <header class="header fixed-top">
    <nav class="navbar navbar-light navbar-expand-lg" data-bs-theme="dark">
      <div class="container position-relative">
        <a class="navbar-brand" href="index.html" data-aos="fade-down">
          <img src="images/logo.png" alt="Game for Good">
        </a>

        <div class="dropdown search-dropdown ms-auto ms-lg-0 me-3 me-md-5 me-lg-0 order-lg-1" data-bs-theme="light">
          <a class="navbar-text text-white navbar-search-btn" href="javascript:;" data-aos="fade-down">
            <span class="iconfont icon-sousuo-copy"></span>
            <span>搜索</span>
          </a>

          <div class="dropdown-menu border-0 shadow-lg">
            <form autocomplete="off" aria-autocomplete="none">
              <div class="input-group input-group-lg">
                <input class="form-control" type="search" name="" placeholder="输入关键词搜索">
                <button class="btn btn-outline-secondary btn-search" type="submit">
                  <span class="iconfont icon-sousuo-copy"></span>
                </button>
              </div>
            </form>
          </div>
        </div>

        <button class="navbar-toggler" type="button" data-aos="fade-down" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas" aria-controls="navbarOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="offcanvas offcanvas-start text-bg-dark flex-lg-grow-0 mx-lg-auto" tabindex="-1" id="navbarOffcanvas" aria-labelledby="offcanvasLabel">
          <div class="offcanvas-header py-5">
            <h5 class="offcanvas-title" id="offcanvasLabel">
              <img src="images/logo.png" height="34" alt="Game for Good">
            </h5>

            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <ul class="navbar-nav" data-aos="fade-down">
              <li class="nav-item">
                <a class="nav-link" href="index.html">首页</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="games.html">G4G游戏+扶持计划</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="events.html">G4G动态</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" href="cases.html">案例库</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>

  <section class="section pb-0">
    <div class="container">
      <div class="card border-0">
        <div class="card-body">
          <div class="row g-3 g-lg-5 mb-5">
            <div class="col-12 col-lg-8">
              <div class="position-relative rounded-5 overflow-hidden" data-aos="fade-up">
                <img class="card-img rounded-5" src="images/cases/case-1.jpg">
              </div>
            </div>
            <div class="col-12 col-lg-4">
              <h3 class="card-title fw-bold my-4 my-xl-5" data-aos="fade-up" data-aos-delay="300">《林中人》</h3>

              <p class="mb-4 fs-base" data-aos="fade-up" data-aos-delay="400">
                <span class="badge py-2 px-3 text-bg-light border rounded-pill">动物保护</span>
                <span class="badge py-2 px-3 text-bg-light border rounded-pill">环境保护</span>
                <span class="badge py-2 px-3 text-bg-light border rounded-pill">可持续发展</span>
              </p>

              <ul class="mb-4 list-unstyled fs-base" data-aos="fade-up" data-aos-delay="500">
                <li class="badge p-3 text-bg-light border rounded-4 text-start">
                  <p class="mb-2 text-body-tertiary">开发商</p>
                  <p class="mb-0">星辰重工</p>
                </li>
                <li class="badge p-3 text-bg-light border rounded-4 text-start">
                  <p class="mb-2 text-body-tertiary">平台</p>
                  <p class="mb-0">PC，小程序</p>
                </li>
                <li class="badge p-3 text-bg-light border rounded-4 text-start">
                  <p class="mb-2 text-body-tertiary">价格</p>
                  <p class="mb-0">免费</p>
                </li>
              </ul>

              <p data-aos="fade-up" data-aos-delay="600">
                <a class="btn btn-danger btn-lg" href="#" style="min-width:200px;">
                  <span>了解更多</span>
                  <span class="iconfont icon-jiantou"></span>
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="card card-gray card-pad card-pad-lg">
        <div class="card-body">
          <div class="mb-5" data-aos="fade-up">
            <h3 class="display-6 fw-bold mb-4">相关机构</h3>

            <div class="d-flex flex-column flex-lg-row gap-3 gap-lg-4 gap-xl-5">
              <div class="flex-shrink-0">
                <div class="ratio ratio-16x9 rounded-3 w-100 bg-white overflow-hidden media-img">
                  <img class="w-100 h-100 object-fit-contain" src="https://via.placeholder.com/334x160">
                </div>
              </div>
              <div class="flex-grow-1">
                <p class="my-3 my-lg-4">南京市红山森林动物园是一家现代动物。在给予物种保护、施与动物福利并维护动物的健康与自由的同时，积极承担公众教育的责任，致力于培养公众对自然、对生命的同理心、爱心和感恩之情，提升大众保护野生动物及生态发环境的意识和行动力。</p>
              </div>
            </div>
          </div>

          <div data-aos="fade-up">
            <h3 class="display-6 fw-bold mb-4">项目背景</h3>
            <p class="mb-1">因为严峻的毁林问题，野外红猩猩的种群和数量都在急剧下降，变成“极危”的物种。需求方希望以人类最直系的亲属红毛猩猩为主题开发一款游戏，旨在通过建立与红毛猩猩的情感联结，引导公众更多关注红毛湿猩的野外生存环境，了解惊相树种植和毁林的关系及其潜在危害。建立起日常消费行为与森林之间的关系，以鼓励公众在行动上更多支持和消费零毁林和含有可持续棕相油的产品。</p>
            <p class="mb-1">项目目标:</p>
            <p class="mb-1">(1)玩家在游戏中需要认识日常生活行为对雨林的影响，并增加对红毛猩猩生长特点和习性的了解来通过关卡，从而建立起日常消费行为与红毛猩猩等灵长类动物野外生存现状的联系，最终助力森林的保护;</p>
            <p class="mb-1">(2)希望能够让公众关注这一现象，并有玩家参与到实际的保护行动中来</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <footer class="footer bg-dark text-light pt-5 pb-2" data-aos="fade-up">
    <div class="container">
      <div class="row g-3 g-md-4 g-lg-5 mb-5">
        <div class="col-12 col-lg-3">
          <p class="mb-5">
            <img src="images/logo.png" alt="Game for Good">
          </p>

          <p>
            <a class="btn btn-light rounded-4 px-4 py-3" href="#">
              <span class="me-5 me-lg-3 me-xl-5">合作/洽谈</span>
              <span class="d-inline-block align-middle fs-24 iconfont icon-24gl-paperPlane"></span>
            </a>
          </p>
        </div>
        <div class="col-12 col-sm-6">
          <h4 class="mb-5 mt-3 fw-bold">Game for Good</h4>

          <div class="mb-3">
            <p class="mb-0">无论是学术研究、社会治理</p>
            <p class="mb-0">还是企业的游戏化创新探索</p>
            <p class="mb-0">我们始终期待产生</p>
            <p class="mb-0">更多元维度上的「游戏社会价值」</p>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 d-flex flex-column align-items-center align-items-sm-end">
          <div>
            <div class="nav nav-tabs border-0 gap-2 mb-3">
              <a class="nav-link p-2 rounded-pill bg-white text-primary lh-1 text-lg active" href="#qrcode-wechat" data-bs-toggle="tab">
                <span class="iconfont icon-weixin text-lg"></span>
              </a>
              <a class="nav-link p-2 rounded-pill bg-white text-primary lh-1 text-lg" href="#qrcode-chat" data-bs-toggle="tab">
                <span class="iconfont icon-bg-chat text-lg"></span>
              </a>
            </div>

            <div class="tab-content mb-3">
              <div id="qrcode-wechat" class="tab-pane fade show active">
                <div class="card mb-3 border-0 bg-white rounded-3">
                  <div class="card-body p-1">
                    <img src="images/qrcode.jpg" alt="Wechat">
                  </div>
                </div>
              </div>
              <div id="qrcode-chat" class="tab-pane fade">
                <div class="card mb-3 border-0 bg-white rounded-3">
                  <div class="card-body p-1">
                    <img src="images/qrcode.jpg" alt="Chat">
                  </div>
                </div>
              </div>
            </div>

            <p class="mb-0">
              <a class="text-reset" href="mailto:hell@g4g.cn">邮箱: hell@g4g.cn</a>
            </p>
          </div>
        </div>
      </div>

      <hr>

      <p class="text-center">&copy;2023 Game for Good 上海正向数字化技术研究院 沪ICP备-928238444</p>
    </div>
  </footer>

  <!-- build:js scripts/vendor.js -->
  <script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="/node_modules/aos/dist/aos.js"></script>
  <script type="text/javascript" src="/node_modules/swiper/swiper-bundle.min.js"></script>
  <script type="text/javascript" src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/node_modules/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script>
  <!-- endbuild -->

  <!-- build:js scripts/common.js -->
  <script src="scripts/common.js"></script>
  <!-- endbuild -->
</body>
</html>
